<template>
  <div id="shopdetails">
    <!-- 头部 -->
    <div class="sp-details-container">
      <div class="sp-details-contain">
        <div class="sp-details-contain-1">
          <img class="sp-left" src="../image/shopdetails/4e708671b1c5c264.png" alt>
          <div class="sp-right">
            <div class="sp-right-1">
              <h2>沃尔玛-新街口店</h2>
              <div></div>
            </div>
            <div class="sp-right-2">
              <p>达达专送·60分钟</p>
              <p>基础运费4元</p>
            </div>
          </div>
        </div>
        <div class="sp-details-contain-2">
          <div class="dd1">
            <a href>满减</a>
            <span>联合利华洗护满88减12</span>
          </div>
          <div class="dd2">
            <span>
              13种优惠
              <i></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行搜索框 -->
    <div class="de-sreach">
      <div>
        <input type="text" placeholder="搜索店内商品，共2271件好物">
        <i></i>
      </div>
    </div>
    <!-- 第三行图片 -->
    <div class="pic-de">
      <img src="../image/shopdetails/85d279d50be173cb.png" alt>
    </div>
    <!-- 第四行及以下 -->
    <div class="preferential">
      <!-- 左侧 -->
      <ul class="pre-left">
        <li v-for="shopctg in shopctgs" :key="shopctg.id">{{shopctg.text}}</li>
      </ul>
      <!-- 右侧 -->
      <div class="pref-right">
        <!-- 头部 -->
        <div class="prf-change">
          <span @click="skill()" :class="gd?'':'changea'">秒杀</span>
          <span  @click="red()"  :class="gd?'changea':''">直降</span>
        </div>
        <!-- 内容部分 -->

        <!-- 秒杀页面 -->
        <div class="pref-right-contain">
          <!-- 标题 -->
          <div class="pf-1">
            <div>秒杀(155)</div>
            <div>
              <span>销量</span>
              <span>
                价格
                <i></i>
              </span>
            </div>
          </div>
          <!-- 具体商品成列 -->
          <div class="bigbox">
            <div class="Secondskill">
                <!-- {{shop_id}}
                {{cars}} -->
              <ul class="sec-box">
                <li v-for="good1 in good1s" :key="good1.id">
                  <div href="#" class="sec-a-1">
                    <span>
                      <img :src="imgURL+good1.pics" alt>
                    </span>
                    <div class="sec-div-1">
                      <h3>{{good1.title}}</h3>
                      <p>{{good1.text1}}</p>
                      <span class="skp">{{good1.text2}}</span>
                      <div class="sec-bo">
                        <div class="sec-price">
                          <span>￥{{good1.sprice}}</span>
                          <span>￥{{good1.price}}</span>
                        </div>
                      
                        <div class="sec-btn">
                          <div v-if="good1.num">
                             <span class="btn1" @click="reduce(good1)"></span>
                             <span class="txt">{{good1.num}}</span>
                          </div>
                          <span class="btn2" @click="add(good1)" ></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 直降页面 -->
          <div class="pref-right-contain" :class="gd?'':'pref'">
          <!-- 标题 -->
          <div class="pf-1">
            <div>直降(200)</div>
            <div>
              <span>销量</span>
              <span>
                价格
                <i></i>
              </span>
            </div>
          </div>
          <!-- 具体商品成列 -->
          <div class="bigbox">
            <div class="Secondskill">
              <!-- 直降页面 -->
               <ul class="sec-box">
                <li v-for="good2 in good2s" :key="good2.id">
                  <div href="#" class="sec-a-1">
                    <span>
                      <img :src="imgURL+good2.pics" alt>
                    </span>
                    <div class="sec-div-1">
                      <h3>{{good2.title}}</h3>
                      <p>{{good2.text1}}</p>
                      <span class="skp">{{good2.text2}}</span>
                      <div class="sec-bo">
                        <div class="sec-price">
                          <span>￥{{good2.sprice}}</span>
                          <span>￥{{good2.price}}</span>
                        </div>
                      
                        <div class="sec-btn">
                          <div v-if="good2.num">
                             <span class="btn1" @click="reduce(good2)"></span>
                             <span class="txt">{{good2.num}}</span>
                          </div>
                          <span class="btn2" @click="add(good2)" ></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Car :shopid="shop_id"></Car>
  </div>
   
</template>
<script>
import $ from "jquery"
import Car from '@/components/car.vue'
export default {
  props:['shop_id'],
  components:{Car},
  data(){
      return{
        shopctgs:[],
        good1s:[],
        good2s:[],
        gd:false,
      
      }
    },
  created(){
    this.getshopctg(),
    this.getgood1s(),
    this.getgood2s()
    //this.cars[this.shop_id]={} 购物车初始化，就是给cars添加 商店id的属性
    this.$set(this.cars,this.shop_id,{})
   
  },
  methods:{
    add(good1){
     // good1[num]=0;//给商品添加一个num数量的属性,但这样添加会导致每次点击都初始化num等于0 故此方法不可取
     //一般属性中有__ob__代表数据可以双向绑定，能双向绑定的对象都是在data数据中
     //数据的双向绑定一般只能绑定第一层，如果第一层下面还有数据 需要用$set 语法：this.$set(需要设置的对象，需要添加或设置的属性名，属性值) 来设置 
      // this.cars[this.shop_id][good1.id]=good1
      this.$set(this.cars[this.shop_id],good1.id,good1)
      if( this.cars[this.shop_id][good1.id].num==undefined){
         //this.cars[this.shop_id][good1.id].num=1
         this.$set(this.cars[this.shop_id][good1.id],'num',1)
      }else{  
        if(this.cars[this.shop_id][good1.id].num<this.cars[this.shop_id][good1.id].store)
         this.cars[this.shop_id][good1.id].num++
      }
       console.log(this.cars)
    },
    reduce(good1){
      good1.num--
      if(good1.num==0){
       this.$delete(this.cars[this.shop_id],good1.id)

      }

    },
     getshopctg() {
      this.axios
        .get(`${this.apiURL}/shopctg`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.shopctgs = data;

        })
        .catch(() => {});
    },
   getgood1s(){
       this.axios
        .get(`${this.apiURL}/good1s`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.good1s = data;
        })
        .catch(() => {});
   } ,
    getgood2s(){
       this.axios
        .get(`${this.apiURL}/good2s`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.good2s = data;

        })
        .catch(() => {});
   } ,
   red(){
     this.gd=true;
     console.log(this.gd)
   },
   skill(){
     this.gd=false
      console.log(this.gd)
   }
  }

};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
#shopdetails {
  position: absolute;
  right: 0px;
  left: 0px;
  background-color: #fff;
  // 头部
  .sp-details-container {
    padding-top: 16px;
    width: 100%;
    background: #fff;
    .sp-details-contain {
      padding: 4px 20px 30px 20px;
      .sp-details-contain-1 {
        display: flex;
        img {
          width: 136px;
          height: 136px;
        }
        .sp-right {
          width: 100%;
          margin-bottom: 30px;
          //border: 1px solid red;
          .sp-right-1 {
            display: flex;
            h2 {
              font-family: "Microsoft YaHei";
              width: 100%;
              margin-bottom: 18px;
              color: #3c3c3c;
              font-size: 30px;
              font-weight: 600;
              //border: 1px solid red;
            }
            div {
              width: 60px;
              height: 60px;
              background: url("../image/shopdetails/focus.png") no-repeat;
              float: right;
              background-size: 136px auto;
            }
          }
          .sp-right-2 {
            font-size: 24px;
            color: #666;
            p:nth-of-type(1) {
              margin-bottom: 18px;
            }
          }
        }
      }
      .sp-details-contain-2 {
       position: relative;
       margin-bottom: -1px;
       .dd1 {
          height: 20px;
          line-height: 20px;
          a {
            display: inline-block;
            border-radius: 8px 2px;
            background: #48c151;
            color: #fff;
            width: 60px;
            height: 48px;
            text-align: center;
            font-size: 22px;
            line-height:48px;
          }
          span {
            color: #666;
            font-size: 10x;
          }
        }
      .dd2 {
         // float: right;
         position: absolute;
         right:0px;
         top:0px;
          span {
            color: #666;
            font-size: 22x;
            i {
              display: inline-block;
              width: 18px;
              height: 10px;
              background: url(../image/shopdetails/store_bg.png) -14px -8px;
              background-size: 74px 132px;
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  //第二行搜索框
  .de-sreach {
    width: 100%;
    //border: 1px solid red;
    height: 80px;
    background-color: #fff;
    div {
      height: 50px;
      padding: 10px 20px 20px;
      input {
        outline: 0;
        border: 0;
        height: 50px;
        width: 550px;
        margin-top: 5px;
        padding-left: 54px;
        background: url(../image/shopdetails/search_bar_sprites.png) no-repeat -15px -22px;
        background-size: 88px auto;
        font-size: 24px;
        border-radius: 25px;
        background-color: #eee;
      }
      i {
        display: block;
        float: right;
        height: 60px;
        width: 94px;
        //border:1px solid red;
        background-image: url(../image/shopdetails/groupCopy.png);
        background-position: center center;
        background-size:80px 48px;
        background-repeat: no-repeat;
      }
    }
  }
  //第三行图片
  .pic-de {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    background: #fff;
    margin-top: -1px;
    margin-bottom: -1px;
    img {
      width: 100%;
      border-radius: 8px;
    }
  }
  //第四行及以下
  .preferential {
   
    .pre-left {
      position: absolute;
      width: 200px;
      padding-bottom: 160px;
      background-color: #eeeeee;
      height:100%;
      overflow-y: scroll; 
      li {
        height: 92px;
        width: auto;
        padding: 4px 24px;
        line-height: 86px;
        font-size: 28px;
        text-align: center;
        color: #666666;
      }
      li:nth-of-type(1) {
        color: #333333;
        font-weight: bold;
        //background: #fff;
      }
    }
    .pref-right {
      //width: 590px;
       position: absolute;
       left: 200px;
       right: 0px;
       height: 100%;
      font-size: 28px;
      // 头部
      .prf-change {
        background-color: #fff;
        span {
          display: inline-block;
          color: #666666;
          margin-left: 28px;
          height: 72px;
          line-height: 72px;
          text-align: center;
           font-weight: 600;
        }
        .changea {
          color: #47b34f; 
        }
      }
      .pref-right-contain {
        width: 100%;
        background: #fff;
        position: absolute;
        // 头部
        .pf-1 {
          display: flex;
          justify-content: space-between;
          font-size: 24px;
          div {
            height: 60px;
            line-height: 60px;
            color: #666666;
          }
          div:nth-of-type(1) {
            padding-left: 20px;
          }
          div:nth-of-type(2) {
            display: flex;
            span {
              display: block;
              padding-right: 14px;
              line-height: 60px;
              i {
                width: 20px;
                height: 20px;
                display: inline-block;
                background: url(../image/shopdetails/normal_price.png) no-repeat;
                margin-left: 4px;
                background-size: 14px;
              }
            }
          }
        }
        .bigbox {  
          
          .Secondskill {
             background-color:#fff;
              height:100%;  
            .sec-box {
              // position: absolute;
             overflow-y:scroll;  
             height:540px;  
              .sec-a-1 {
                padding: 30px 20px 30px 0px;
                color: #555;
                display: block;
                width: auto;
                display: flex;
                position: relative;
                span {
                  display: inline-block;
                  img {
                    width: 130px;
                    height: 130px;
                    display: inline-block;
                    border-radius: 8px;
                  }
                }
                .sec-div-1 {
                  h3 {
                    font-size: 28px;
                    font-weight: 600;
                    color: #333;
                    padding-left: 10px;
                  }
                  p {
                    padding-left: 10px;
                    padding-top: 10px;
                    color: #666666;
                    font-size: 20px;
                  }
                  .skp {
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    background: #ff7d7d;
                    color: #fff;
                    font-size: 18px;
                    padding: 10px;
                    border-radius: 8px 2px;
                    width: auto;
                    margin: 20px 0px 0px 10px;
                  }
                  .skp2{
                     background:#FF9633;
                  }
                  .sec-bo {
                    .sec-price {
                      padding: 10px 0px 0px 10px;
                      span {
                        display: block;
                      }
                      span:nth-of-type(1) {
                        color: red;
                        font-size: 28px;
                      }
                      span:nth-of-type(2) {
                        text-decoration: line-through;
                        color: #666666;
                        font-size: 18px;
                      }
                    }
                    .sec-btn {
                      position: absolute;
                      right: 20px;
                      top: 160px;
                     // display: flex;
                       span {
                        display: block;
                        width: 56px;
                        height: 56px;
                        line-height: 56px;
                        text-align:center;
                        font-size:30px;
                      }
                     div{
                       display: flex;
                       position: absolute;
                       right: 70px;
                      .btn1{
                        background: url(../image/shopdetails/addNumSprite.png) no-repeat ;
                        background-position: -84px 0;
                        background-size: 224px 57px;
                        margin-right: 10px;
                      }
                       }
                      .btn2{
                        background: url(../image/shopdetails/addNumSprite.png);
                         background-position: 0 0;
                        background-size: 224px 57px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .pref{
        z-index: -1;
      }
    }
    .navigation {
      position: fixed;
      left:678px;
      bottom: 400px;
      width: 72px;
      height: 72px;
      background: rgba(0, 0, 0, 0.8) url(../image/shopdetails/bm.png) 14px 14px
        no-repeat;
      background-size: 130px 40px;
      border-radius: 10px 0px 0px 10px;
      .nav-box {
        width: 190px;
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        bottom: 80px;
        right:0px;
        //z-index: 3;
       
        a {
          display: block;
          color: #fff;
          padding-left: 76px;
          border-bottom: 1px solid #4b4b4b;
          line-height: 70px;
          background: url(../image/shopdetails/bmenu.png) no-repeat;
          font-size: 28px;
        }
        .a1 {
          background-position: 20px -100px;
        }
        .a2 {
          background-position: 20px -200px;
        }
        .a3 {
          background-position: 20px -300px;
        }
        .a4 {
          background-position: 20px -397px;
        }
        .a5 {
          background-position: 20px -500px;
        }
        i {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid  #4b4b4b;
          position:absolute;
          right: 30px;
        }
      }
    }
  }
}
</style>


